{{#>base title=data.page.tooltip}}

    {{#*inline "pageContent"}}

        <div class="row">
            <div class="col-md-12">
                <h3 class="page-title">
                    {{data.page.tooltip}}
                </h3>
            </div>
        </div>

        <!-- BEGIN PAGE CONTENT-->
        <div class="row">

            <div class="col-md-12">
                <div class="portlet box default">
                    <div class="portlet-title">
                        <div class="caption">
                            Buttons & Links
                        </div>

                    </div>
                    <div class="portlet-body">

                        <p>
                            <button class="btn btn-default tooltips" data-placement="top" data-original-title="Tooltip in top">Top</button>
                            <button class="btn btn-default tooltips" data-placement="left" data-original-title="Tooltip in left">Left</button>
                            <button class="btn btn-default tooltips" data-placement="right" data-original-title="Tooltip in right">Right</button>
                            <button class="btn btn-default tooltips" data-placement="bottom" data-original-title="Tooltip in bottom">Bottom</button>
                        </p>

                        <p>
                            <a href="#" class="tooltips" data-original-title="Very long toolips Very long toolips Very long toolips Very long toolips">tooltips</a>
                        </p>
                        <p>
                            Tight pants next level keffiyeh <a href="#" class="tooltips" data-container="body" data-original-title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" class="tooltips" data-container="body" data-original-title="Another tooltip">have a</a> terry richardson vinyl chambray. <a href="#" class="tooltips" title="12" data-container="body" data-original-title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.
                        </p>


                    </div>
                </div>

            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <!--markdown-->
                <div class="markdown">

                    <h3>HTML</h3>
<pre ><code class="html">&lt;!--Button--&gt;
&lt;button class=&quot;btn btn-default tooltips &quot; data-placement=&quot;top&quot; data-original-title=&quot;Tooltip in top&quot;&gt;Top&lt;/button&gt;
&lt;button class=&quot;btn btn-default tooltips &quot; data-placement=&quot;left&quot; data-original-title=&quot;Tooltip in left&quot;&gt;Left&lt;/button&gt;
&lt;button class=&quot;btn btn-default tooltips &quot; data-placement=&quot;right&quot; data-original-title=&quot;Tooltip in right&quot;&gt;Right&lt;/button&gt;
&lt;button class=&quot;btn btn-default tooltips &quot; data-placement=&quot;bottom&quot; data-original-title=&quot;Tooltip in bottom&quot;&gt;Bottom&lt;/button&gt;

&lt;!--A--&gt;
&lt;a data-original-title=&quot;Very long toolips&quot; class=&quot;tooltips&quot; href=&quot;#&quot;&gt;tooltips&lt;/a&gt;</code></pre>
                </div>
                <!--end markdown-->
            </div>
        </div>


        <!-- END PAGE CONTENT-->
        <div class="clear"></div>
    {{/inline}}

    {{#*inline "appScript"}}
        <script type="text/javascript">
            pagurian.call("modules/com/app", function(app) {
                app.page.tooltip();
            });
        </script>
    {{/inline}}

{{/base}}
